/*
 * @Author: xiaosihan
 * @Date: 2021-05-23 16:05:24
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-11-07 13:39:19
 */

import React from "react";
import { Camera, FPSControls, Group3D, Plane, RaycasterMesh } from "xsh-react-three";

interface Props { }

interface State { }

export default class FPSDemo extends Group3D<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    render() {

        const { dev } = this.context;


        return (
            <Group3D
                position={{ x: 0, y: 0, z: 0 }}
            >
                {/* 地面 */}
                <RaycasterMesh
                    position={{ x: 0, y: -0.5, z: 0 }}
                    rotation={{ x: Math.PI / -2, y: 0, z: 0 }}
                    scale={{ x: 100.2, y: 100.2, z: 1 }}
                >
                    <Plane
                        rotation={{ x: 0, y: 0, z: 0 }}
                        scale={{ x: 0.99, y: 0.99, z: 0.99 }}
                    />
                </RaycasterMesh>

                {/* 射线拾取专用模型 */}
                <RaycasterMesh
                    position={{ x: -9, y: 7.6, z: 5 }}
                    rotation={{ x: Math.PI / -2, y: Math.PI / 6, z: 0 }}
                    scale={{ x: 10.2, y: 10.2, z: 0.2 }}
                >
                    <Plane
                        rotation={{ x: 0, y: 0, z: 0 }}
                        scale={{ x: 0.99, y: 0.99, z: 0.99 }}
                    />
                </RaycasterMesh>

                {/* 射线拾取专用模型 */}
                <RaycasterMesh
                    position={{ x: 0, y: 4, z: 5 }}
                    rotation={{ x: Math.PI / -2, y: 0, z: 0 }}
                    scale={{ x: 10.2, y: 10.2, z: 0.2 }}
                >
                    <Plane
                        rotation={{ x: 0, y: 0, z: 0 }}
                        scale={{ x: 0.99, y: 0.99, z: 0.99 }}
                    />
                </RaycasterMesh>

                {/* 射线拾取专用模型 */}
                <RaycasterMesh
                    position={{ x: 0, y: 5, z: 11 }}
                    rotation={{ x: Math.PI / 18, y: 0, z: 0 }}
                    scale={{ x: 10.2, y: 10.2, z: 1 }}
                >
                    <Plane
                        rotation={{ x: 0, y: 0, z: 0 }}
                        scale={{ x: 0.99, y: 0.99, z: 0.99 }}
                    />
                </RaycasterMesh>

                {/* 射线拾取专用模型 */}
                <RaycasterMesh
                    position={{ x: 0, y: 10, z: 0 }}
                    rotation={{ x: Math.PI / -18, y: 0, z: 0 }}
                    scale={{ x: 10.2, y: 10.2, z: 0.2 }}
                >
                    <Plane
                        rotation={{ x: 0, y: 0, z: 0 }}
                        scale={{ x: 0.99, y: 0.99, z: 0.99 }}
                    />
                </RaycasterMesh>

                {/* 射线拾取专用圆柱模型 */}
                <RaycasterMesh
                    type="cylinder"
                    position={{ x: 20, y: 5.1, z: 0 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    scale={{ x: 10, y: 10, z: 10 }}
                >
                </RaycasterMesh>

                {/* 射线拾取专用面模型 */}
                <RaycasterMesh
                    type="plane"
                    position={{ x: 40, y: 5, z: 0 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    scale={{ x: 10, y: 10, z: 10 }}
                />

                <FPSControls
                    initTime={0}
                    position={{ x: 3, y: 4, z: 16 }}
                    rotation={{ x: 0, y: 0, z: 0 }}
                    collideVolume={3}
                    collide={true}// 碰撞检测
                    lock={false} // 锁定鼠标
                    gravity={true}//重力
                    enabled={true}
                >
                    <Camera
                        position={dev ? { x: 0, y: 5, z: 15 } : {}}
                        rotation={dev ? { x: Math.PI / -10, y: 0, z: 0 } : {}}
                    />
                </FPSControls>

            </Group3D >
        );
    }
}